<template>
<div>
    <!-- 回复弹窗 -->
            <div class="pop-up" v-if="isshowPopUp">
              <div class="pop-up-area">
                <div class="header">
                  <h4 class="reply-name">回复@{{userdata.username}}</h4>
                  <span><i class="iconfont icon-guanbi" @click="closePopUp"></i></span>
                </div>
                <div class="text">
                  <form>
                    <div class="textarea-box">
                      <textarea
                        rows="4"
                        class="comment-box-textarea"
                        v-focus
                        placeholder="发布你的回复"
                        v-model="replyContent"
                      ></textarea>
                    </div>
                  </form>
                </div>
                <div class="emoj-btn">
                  <div class="emoj-box">

                      <span class="EmotionButton" @click="OpenEmotions()">
                        <i class="iconfont icon-biaoqing IconfontSize"></i>
                      </span>
                      <Emo ref="emoReply" @AppendInputValue="AppendreplyContent" />

                  </div>
                  <div class="btn-box">
                    <div class="btn">
                      <button ref="commentButtn" @click="releaseReply">发布</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="mask"  v-show="ismask"></div>
</div>

</template>

<script>
import Emo from '@/components/utilView/emoView.vue'
import { mapState } from 'vuex'
import http from '@/util/http'
export default {
  components: {
    Emo
  },
  props: {
    userdata: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      ismask: false, // 遮罩是否隐藏
      replyContent: '', // 回复内容
      isshowPopUp: false // 回复弹窗是否隐藏
    }
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    // 点击回复弹出回复弹窗
    PopUp () {
      this.isshowPopUp = true
      this.ismask = true
    },
    // 关闭弹窗
    closePopUp () {
      this.isshowPopUp = false
      this.ismask = false
      // 清除评论内容
      this.replyContent = ''
    },
    // 表情选中后追加在input 回复 评论
    AppendreplyContent (EmotionChinese) {
      this.replyContent += EmotionChinese
    },
    // 打开表情包弹框
    OpenEmotions () {
      this.$refs.emoReply.OpenEmotion(true)
    },
    // 回复评论内容
    releaseReply () {
      const { type, nid, pid, typeid, index } = this.userdata
      if (this.replyContent === '') {
        console.log('回复内容为空')
        return
      }
      if (type === 'video') {
        // rep_uid 发布回复评论的用户
        // rep_nid 被回复的用户
        // rep_video_id 视频的id
        // rep_pid 被回复的评论id
        // rep_content 回复的评论内容
        http.appendReply({ rep_uid: this.user.uid, rep_nid: nid, rep_video_id: typeid, rep_pid: pid, rep_content: this.replyContent }).then(res => {
          console.log(res.data)
          if (+res.data.ok === 1) {
            // 添加成功 ，将index 传递，用户操作回复评论数据数组
            this.$emit('transfer', {
              index: index
            })
            // 关闭弹窗
            this.closePopUp()
          }
        })
      } else if (type === 'article') {
        // console.log('文章的二级评论')
        // console.log('文章回复评论内容', this.userdata)
        http.appendArcReply({ rep_uid: this.user.uid, rep_nid: nid, rep_arc_id: typeid, rep_pid: pid, rep_content: this.replyContent }).then(res => {
          console.log(res.data)
          if (+res.data.ok === 1) {
            // 关闭弹窗
            this.closePopUp()
            // 添加成功 ，将index 传递，用户操作回复评论数据数组
            this.$emit('articleEvent', {
              index: index,
              pid: pid
            })
          }
        })
      }
    }
  },
  // 自定义指令
  directives: {
    focus: {
      mounted (el) {
        el.onfocus = function () {
          el.className = 'input-active comment-box-textarea '
        }
        el.onblur = function () {
          el.className = 'comment-box-textarea'
        }
      }
    }
  }
}
</script>

<style lang='scss' scoped>
    // 回复弹窗
          .pop-up{
            width: 100%;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            z-index: 1001;
            .pop-up-area{
              width: 600px;
              margin: 0 auto;
              background: #fff;
              border: 1px solid #f9f9f9;
              border-radius: 12px;
              .header{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin: 10px 10px 0px 20px;
                border-bottom: 1px solid #f9f9f9;
                height: 38px;
                .reply-name{
                  font-size: 14px;
                  font-weight: 800;
                  color: #333;
                }
                i{
                  font-size: 14px;
                  color: #333;
                  font-weight: 600;
                  cursor: pointer;
                }
              }
              .text{
                // width: 100%;
                height: 60px;
                padding: 10px;
                .textarea-box{
                  height: 60px;
                  padding: 6px 10px;
                  .comment-box-textarea{
                    width: 100%;
                    height: 100%;
                    background: #fff;
                    border: 1px solid rgb(255, 123, 35);
                    border-radius: 5px;
                    color: #333;
                    line-height: 24px;
                    resize: none;
                    padding-left:  5px;
                    font-family: "微软雅黑";

                    &:hover {
                    background: #fff;
                    border: 1px solid #f60;
                    }
                    &:focus {
                      outline: none;
                    }
                    &::placeholder {
                      color: #c1c1c1;
                    }
                  }
                }
              }
              .emoj-btn{
                // width: 100%;
                // margin-top: 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin: 10px 10px 10px 20px;
                .emoj-box{
                  .EmotionButton{
                    width: 30px;
                    height: 30px;
                    margin: 5px 0;
                    display: inline-block;
                    border-radius: 50%;
                    .IconfontSize{
                      font-size: 24px;
                      color: #999;
                      cursor: pointer;
                    }
                  }
                }
                .btn-box{
                  background: #f60;
                  width: 50px;
                  height: 30px;
                  border-radius: 15px;
                  color: #fff;
                  text-align: center;
                  margin-right: 10px;
                  .btn{
                    width: 100%;
                    height: 100%;

                    button{
                      width: 100%;
                      height: 100%;
                      display: inline-block;
                      border: none;
                      background: rgb(255, 158, 93);
                      color: #fff;
                      border-radius: 15px;
                      font-weight: 600;
                      font-size: 13px;
                      cursor: pointer;
                    }
                  }
                }
              }
            }
          }
          @media screen and (min-height:540px) and (max-width:768px) {
            .pop-up{
            width: 100%;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            z-index: 1001;
            .pop-up-area{
              width: 400px;
              margin: 0 auto;
              background: #fff;
              border: 1px solid #f9f9f9;
              border-radius: 12px;
              .header{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin: 10px 10px 0px 20px;
                border-bottom: 1px solid #f9f9f9;
                height: 38px;
                .reply-name{
                  font-size: 14px;
                  font-weight: 800;
                  color: #333;
                }
                i{
                  font-size: 14px;
                  color: #333;
                  font-weight: 600;
                  cursor: pointer;
                }
              }
              .text{
                // width: 100%;
                height: 60px;
                padding: 10px;
                .textarea-box{
                  height: 60px;
                  padding: 6px 10px;
                  .comment-box-textarea{
                    width: 100%;
                    height: 100%;
                    background: #fff;
                    border: 1px solid rgb(255, 123, 35);
                    border-radius: 5px;
                    color: #333;
                    line-height: 24px;
                    resize: none;
                    padding-left:  5px;
                    font-family: "微软雅黑";

                    &:hover {
                    background: #fff;
                    border: 1px solid #f60;
                    }
                    &:focus {
                      outline: none;
                    }
                    &::placeholder {
                      color: #c1c1c1;
                    }
                  }
                }
              }
              .emoj-btn{
                // width: 100%;
                // margin-top: 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin: 10px 10px 10px 20px;
                .emoj-box{
                  .EmotionButton{
                    width: 30px;
                    height: 30px;
                    margin: 5px 0;
                    display: inline-block;
                    border-radius: 50%;
                    .IconfontSize{
                      font-size: 24px;
                      color: #999;
                      cursor: pointer;
                    }
                  }
                }
                .btn-box{
                  background: #f60;
                  width: 50px;
                  height: 30px;
                  border-radius: 15px;
                  color: #fff;
                  text-align: center;
                  margin-right: 10px;
                  .btn{
                    width: 100%;
                    height: 100%;

                    button{
                      width: 100%;
                      height: 100%;
                      display: inline-block;
                      border: none;
                      background: rgb(255, 158, 93);
                      color: #fff;
                      border-radius: 15px;
                      font-weight: 600;
                      font-size: 13px;
                      cursor: pointer;
                    }
                  }
                }
              }
            }
          }
          }
           @media screen  and (max-width:540px) {
            .pop-up{
            width: 100%;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            z-index: 1001;
            .pop-up-area{
              width: 9rem;
              margin: 0 auto;
              background: #fff;
              border: 1px solid #f9f9f9;
              border-radius: 12px;
              .header{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin: 10px 10px 0px 20px;
                border-bottom: 1px solid #f9f9f9;
                height: 38px;
                .reply-name{
                  font-size: 14px;
                  font-weight: 800;
                  color: #333;
                }
                i{
                  font-size: 14px;
                  color: #333;
                  font-weight: 600;
                  cursor: pointer;
                }
              }
              .text{
                // width: 100%;
                height: 60px;
                padding: 10px;
                .textarea-box{
                  height: 60px;
                  padding: 6px 10px;
                  .comment-box-textarea{
                    width: 100%;
                    height: 100%;
                    background: #fff;
                    border: 1px solid rgb(255, 123, 35);
                    border-radius: 5px;
                    color: #333;
                    line-height: 24px;
                    resize: none;
                    padding-left:  5px;
                    font-family: "微软雅黑";

                    &:hover {
                    background: #fff;
                    border: 1px solid #f60;
                    }
                    &:focus {
                      outline: none;
                    }
                    &::placeholder {
                      color: #c1c1c1;
                    }
                  }
                }
              }
              .emoj-btn{
                // width: 100%;
                // margin-top: 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin: 10px 10px 10px 20px;
                .emoj-box{
                  .EmotionButton{
                    width: 30px;
                    height: 30px;
                    margin: 5px 0;
                    display: inline-block;
                    border-radius: 50%;
                    .IconfontSize{
                      font-size: 24px;
                      color: #999;
                      cursor: pointer;
                    }
                  }
                }
                .btn-box{
                  background: #f60;
                  width: 50px;
                  height: 30px;
                  border-radius: 15px;
                  color: #fff;
                  text-align: center;
                  margin-right: 10px;
                  .btn{
                    width: 100%;
                    height: 100%;

                    button{
                      width: 100%;
                      height: 100%;
                      display: inline-block;
                      border: none;
                      background: rgb(255, 158, 93);
                      color: #fff;
                      border-radius: 15px;
                      font-weight: 600;
                      font-size: 13px;
                      cursor: pointer;
                    }
                  }
                }
              }
            }
          }
          }
          //遮罩层
          .mask{
            width:100%;
            height:100%;
            position: fixed;
            top:0;
            left: 0;
            background: rgba($color: #000000, $alpha: .5);
            z-index: 1000;
          }
</style>
